body{
    padding-top: .6rem;
}
header {

    // background: url('../images/home/header_bg.png') no-repeat;
    // background-size: cover;
    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .15rem;

        .left {
            display: flex;
            align-items: center;

            img {
                width: .26rem;
                height: .36rem;
                margin-right: .2rem;
            }

            .address {
                font-size: .3rem;
                color: white;
                width: 1.8rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        .right {
            position: relative;
            width: 4.08rem;
            height: .5rem;
            display: flex;
            align-items: center;

            img {
                position: absolute;
                left: .23rem;
                width: .23rem;
                height: .21rem;
            }

            input {
                width: 100%;
                height: 100%;
                border-radius: .22rem;
                background-color: #ff8ca9;
                text-indent: .57rem;
                color: #fff;
                font-size: .24rem;

                &::placeholder {
                    color: white;
                    font-size: .24rem;
                }
            }
        }
    }

    .swiper {
        margin-top: .2rem;
        width: 7.06rem;
        height: 3.56rem;
        border-radius: .2rem;
        overflow: hidden;
        --swiper-pagination-color: #ff3366;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.header_bg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

section {
    margin-top: .35rem;

    .classify {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            span {
                font-size: .28rem;
                margin-top: .15rem;
            }
        }
        .item:nth-child(1){
            img{
                width: .83rem;
                height: .72rem;
            }
        }
        .item:nth-child(2){
            img{
                width: .77rem;
                height: .78rem;
            }
        }
        .item:nth-child(3){
            img{
                width: .70rem;
                height: .88rem;
            }
        }
        .item:nth-child(4){
            img{
                width: .90rem;
                height: .88rem;
            }
        }
    }

    .board {
        margin-top: .4rem;
        width: 100%;
        height: 1.1rem;
        background: url('../images/home/board_bg.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .15rem;
        img{
            width: .82rem;
            height: .83rem;
        }
        .text{
            font-size: .36rem;
            color: #fff;
            margin-left: .5rem;
            margin-bottom: .05rem;
            span{
                font-weight: bold;
            }
        }
    }
}

main{
    margin-top: .36rem;
    .head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
            font-size: .36rem;
            color: #333333;
            font-weight: 600;
        }
        .right{
            font-size: .3rem;
            color: #666666;
        }
    }
    .content{
        height: 10rem;
        overflow-y: scroll;
        padding-bottom: 1rem;
       .item{
        width: 100%;
        height: 2.4rem;
        display: flex;
        padding: .25rem 0 .3rem;
        border-bottom: 1px solid #ebebeb;
        &>.left{
            border-radius: .1rem;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }
        &>.right{
            flex-grow: 1;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            justify-content: space-between;
            padding-left: .46rem;
            .name{
                font-size: .36rem;
                color: #333333;
                font-weight: bold;
            }
            .sales{
                display: flex;
                .star{
                    display: flex;
                    align-items: center;
                    font-size: .3rem;
                    color: #ff3366;
                    margin-right: .22rem;
                    img{
                        width: .3rem;
                        height: .3rem;
                    }
                }
                .num{
                    font-size: .26rem;
                    color: #666666;
                }
            }
            .least_distance{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .least{
                    font-size: .26rem;
                    color: #666666;
                }
                .distance{
                    font-size: .26rem;
                    color: #666666;
                }
            }
            .discounts{
                padding: .02rem .12rem;
                background-color: #ff3366;
                font-size: .24rem;
                color: #fff;
            }
        }
    } 
    }
    
}